<template>
	<view class="content">
		<!-- 		//顶部导航栏 -->
		<nav-bar type="transparentFixed" :scrollTop="scrollTop" transparentFixedFontColor="#000000"
			:bgColor="['#eaebea','#00d1ff']">
			<view slot="transparentFixedRight">
				<uni-fav :checked="checkList" class="favBtn" bg-color="#f8f8f8" bg-color-checked="#eeeeee"
					fg-color="#333333" fg-color-checked="#333333" @click="favClick(3)" circle="true"
					:content-text="contentText" style="margin-top: 10rpx;" />
			</view>
		</nav-bar>


		<!-- 简介介绍+公司在线状况+职位描述+公司详情 -->
		<view class="light" style="border-radius: 40rpx 40rpx 0rpx 0;margin-top: 80rpx;background-color: #ffffff;">
			<!-- //简略介绍 -->
			<view>
				<uni-row class="demo-uni-row">
					<uni-col :span="20" :offset="2">
						<!-- 标题 -->
						<view class="demo-uni-col ">
							<text style="font-size: 40rpx;font-weight: 600;">{{dataList.title}}</text>
						</view>
						<!-- 招聘方式 -->
						<view class="demo-uni-col ">
							<text
								style="font-size: 35rpx;font-weight: 400; color: #E41F19;">{{dataList.job_method}}</text>
						</view>
						<!-- 条件 -->
						<view class="demo-uni-col ">
							<text
								style="font-size: 20rpx;font-weight: 400;">{{dataList.qualifications_of_applicant}}</text>
						</view>
						<!-- 待遇 -->
						<view class="demo-uni-col ">
							<u-toast ref="uToast"></u-toast>
							<u-tag :text="dataList.environment" :type="type" :shape="shape" :closeable="closeable"
								:mode="mode1" @close="close" @click="click" :show="show" :size="size1" />
						</view>
					</uni-col>
				</uni-row>
			</view>
			<!-- 公司在线状态及名称 -->
			<view
				style="border-radius: 40rpx 40rpx 40rpx 40rpx;background-color: #ffffff;margin: 20rpx 20rpx 0rpx 0rpx;">
				<uni-row class="demo-uni-row">
					<!-- 在线状态 -->
					<uni-col :span="6" :offset="2">
						<view class="demo-uni-col " style="margin-top: 4rpx;">
							<u-avatar :mode="mode" :size="size" :src="src" :text="text" :showLevel="showLevel"
								:showSex="showSex" :sexIcon="sexIcon" :bgColor='bgColor'></u-avatar>
						</view>
					</uni-col>
					<!-- 名称 -->
					<uni-col :span="16">
						<view class="demo-uni-col " style="margin-left: -40rpx;">
							<text
								style="font-size: 40rpx;font-weight: 500;color: #000000;">{{companyInfoList.name}}</text>
						</view>
						<view class="demo-uni-col " style="margin-left: -40rpx;">
							<text style="font-size: 20rpx;font-weight: 400;">今日活跃</text>
						</view>
					</uni-col>
				</uni-row>
			</view>
			<!-- 职位描述 -->
			<view
				style="border-radius: 40rpx 40rpx 40rpx 40rpx;background-color: #f3f4f8;margin: -20rpx 60rpx 0 60rpx;">
				<uni-row class="demo-uni-row" style="padding-top: 40rpx;">
					<!-- 标题 -->
					<uni-col :offset="2">
						<view class="demo-uni-col ">
							<view class="u-demo-title" style="font-size: 35rpx;font-weight: 500;">职位描述</view>
						</view>
					</uni-col>
					<!-- 内容 -->
					<!-- <uni-col> -->
					<uni-col :span="20" :offset="2">
						<u-read-more @open="open" @close="close" :toggle="toggle" :show-height="showHeight" text-indent="0"
							ref="uReadMore" :shadow-style="shadowStyle" close-text="查看更多">
							<!-- u-parse组件在微信小程序渲染慢，支付宝小程序rich-text不支持nodes属性 -->
							<!-- #ifdef MP-ALIPAY -->
							<u-parse :html="content"></u-parse>
							<!-- #endif -->
							<!-- #ifndef MP-ALIPAY -->
							<rich-text :nodes="content"></rich-text>
							<!-- #endif -->
						</u-read-more>
					</uni-col>
				</uni-row>
			</view>
			<u-gap height="100" bg-color="#ffffff"></u-gap>
			<!-- 公司详情 -->
			<view>
				<uni-row class="demo-uni-row">
					<!-- 标题 -->
					<uni-col :offset="2">
						<view class="demo-uni-col ">
							<text style="font-size: 40rpx;font-weight: 600;color: #000000;">公司信息</text>
						</view>
					</uni-col>
					<!-- 名称 -->
					<uni-col :span="18" :offset="2">

						<view class="demo-uni-col ">
							<text
								style="font-size: 35rpx;font-weight: 400;color: #000000;">{{companyInfoList.name}}</text>
						</view>
						<view class="demo-uni-col ">
							<text style="font-size: 20rpx;font-weight: 400;">1-49人|新技术</text>
						</view>
					</uni-col>
					<!-- 查看公司详情 -->
<!-- 					<uni-col :span="2">
						<view class="demo-uni-col ">
							<text style="font-size: 20rpx;font-weight: 400;">点击查看</text>
						</view>
					</uni-col> -->
					<!-- 公司位置 -->
					<uni-col :span="20" :offset="2">
						<view class="page-body">
							<view class="page-section page-section-gap">
								<map style="width: 100%; height: 200px;border-radius: 40rpx;" :latitude="latitude"
									:longitude="longitude" :markers="covers">
								</map>
							</view>
						</view>
					</uni-col>

				</uni-row>
			</view>
		</view>
		<u-gap height="100" bg-color="#bbb"></u-gap>
		<view class="navigation">
			<view class="left">
				<view class="item">
					<u-icon name="server-fill" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">电话</view>
				</view>
				<view class="item">
					<u-icon name="home" :size="40" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1" @click="toChatPage">在线聊天</view>
				</view>
			</view>
			<view class="right">
				<view class="buy btn u-line-1" @click="ApplicationOfJob">申请职业</view>
			</view>
		</view>
		<u-toast :type="toasttype" ref="uToast"></u-toast>
	</view>
</template>

<script>
	let _this;
	import MescrollBodyDiy from "@/uni_modules/mescroll-uni/components/mescroll-diy/beibei/mescroll-body.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			MescrollBodyDiy, // 避免与main.js注册的全局组件名称相同,否则注册组件失效(iOS真机 APP HBuilderX2.7.9)
		},
		data() {
			return {
				toasttype: 'success', //提示框
				showtitle: '发布成功',
				icon: true,
				position: 'center',
				url: '',
				checkList: false, //收藏按钮
				contentText: {
					contentDefault: '',
					contentFav: '已收藏'
				},
				scrollTop: 0, //导航下滑渐变
				text1: '包吃包住', //标签配置
				mode1: 'light',
				type: 'success',
				size1: 'default',
				shape: 'circle',
				closeable: false,
				show: true,
				mode: 'square', //头像配置
				src: 'https://img1.baidu.com/it/u=3420584700,3273220013&fm=26&fmt=auto',
				text: '', // 优先级比src高
				size: '100',
				showLevel: true,
				showSex: false,
				sexIcon: 'man',
				bgColor: '#fcbd71', //结束
				id: 0, // 使用 marker点击事件 需要填写id
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],
				title: "招聘页面",
				content: `【招聘岗位】 普工、操作工<br/>
【招聘要求】 男女不限，18周岁-40周岁<br/>
【工作环境】 流水线，操作机台，坐班、站班都有，不穿无尘服<br/>
【薪资待遇】 13/小时，综合薪资4500-5000元<br/>
【上班时间】两班倒8:00-20:00，一个月倒班
长白班：8:00-20:00（产量大加班到22:00）<br/>
【体检情况】不体检<br/>
【吃饭住宿】 一天三餐全包，住宿4-6人间<br/>
【发薪日期】 每个月月底发放上月薪资<br/>
【企业地址】上饶广丰<br/>	
【面试须知】 身份证原件、行李当天可安排入住`,
				showHeight: 300,
				toggle: true,
				shadowStyle: {
					backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #f3f5f9 80%)",
					paddingTop: "300rpx",
					marginTop: "-300rpx"
				},
				dataList: {},
				companyInfoList: {},
				ListID: '',
				UserID: '',
				typeID: '',
				EnterpriseID:''
			}
		},
		mounted() {
			_this = this;
		},
		onLoad: function(Option) {
			console.log("详情页面获取到ID为" + Option.id)
			this.index(Option.id)
			this.ListID = Option.id
			try {
				const value = uni.getStorageSync('setUserData');
				this.UserID = value.user_id
				this.typeID=value.type_id

			} catch (e) {
				// error
			}
			//收藏初始化
			const data = {
				ListID: this.ListID
			}
			this.$api.functionList.CheckCollect(data, this.UserID).then(res => {
				console.log(res)
				let CollectState = res.data.data
				console.log(CollectState)
				CollectState == true ? this.checkList = true : this.checkList = false
			})
		},
		methods: {
			index(id) {
				this.$api.companyList.getCompanyListDetail(id).then(res => {
					console.log(res.data.data)
					let comListDetail = res.data.data.company_list_detail_data
					let companyInfo = res.data.data.company_information_data
					this.EnterpriseID=comListDetail.enterprise_information
					this.dataList = comListDetail
					this.companyInfoList = companyInfo
					//this.content = comListDetail.job_description
				})
			},
			showHeightChange(index) {
				this.showHeight = index == 0 ? 100 : index == 1 ? 200 : 400;
			},
			toggleChange(index) {
				this.toggle = index == 0 ? true : false;
			},
			open() {
				// console.log('open');
			},
			close() {
				// console.log('close');
			},
			favClick(index) {
				const data = {
					ListID: this.ListID,
					FunctionState: true //true 加入收藏  false 取消收藏
				}
				if (this.checkList == true) { //取消收藏
					data.FunctionState = false
					console.log(data)
				} else { //加入收藏
					console.log(data)
				}
				this.$api.functionList.ApplyCollect(data, this.UserID).then(res => {
					this.checkList = !this.checkList
					this.$forceUpdate()
				})

			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			ApplicationOfJob() {
				if(this.typeID==0){//个人
				console.log("EnterpriseID:"+this.EnterpriseID)
					const Form = {
						CompanyListID: this.ListID,
						EnterpriseID:this.EnterpriseID,
						ResumeID: 1
					
					}
					// listID UserID ResumeID 
					this.$api.functionList.SendUserResume(Form, this.UserID).then(res => {
						console.log("用户:" + this.UserID + "向" + Form.CompanyListID + "投递简历")
						uni.$emit('upload-success',{msg:"2222"})
					
					})
					.catch(error=>{
						
					})
					
					this.toasttype = 'success'
					this.showtitle = '申请成功'
					this.Show()
				}else{//企业
					this.toasttype = 'error'
					this.showtitle = '您暂无申请权限'
					this.Show()
				}

			},
			Show() {
				this.$refs.uToast.show({
					title: this.showtitle,
					position: this.position,
					type: this.toasttype,
					icon: this.icon,
					url: this.url,
				});
			},
			hide() {
				this.$refs.uToast.hide();
			},
			toChatPage(){
				console.log("page")
				uni.navigateTo({
					url:'/pages/chat/chat'+this.UserID,
					animationType: 'fade-in'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f9f9f9;

	}

	/* #ifdef MP-ALIPAY */
	.uni-fav {
		margin-left: 20rpx;
	}

	/* #endif */


	.favBtn {
		margin: 0 20rpx 20rpx 0;
	}


	.example-body-fullWidth {
		padding: 32rpx 0;
	}

	.example-body-first {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-start;
	}

	.favBtn-nav {
		// left:-50rpx;
	}

	.wrap /deep/ .u-content {
		color: #666 !important;
	}

	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		background-color: #d3dce6;
	}

	.light {
		background-color: #e5e9f2;
	}

	.navigation {
		display: flex;
		position: fixed;
		//margin-top: 100rpx;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 30rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			// margin-left: 80rpx;
			.btn {
				line-height: 66rpx;
				padding: 0 160rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>
